<style scoped>
.info-price-title-stock-sales{padding: 4px 8px;}
.price{color: #ff9200;font-size: 1.6em;font-weight: bold;margin-right: 5px;}
.price>.bg{font-size: 1.6em;}
.del_price{color: #999;}
.stock-sales-quota{font-size: 0.8em;color: #999;}
</style>
<template>
  <div class="info-price-title-stock-sales">
    <div class="flex" style="justify-content: space-between;">
      <div class="flex">
        <money class="price" :value="value.price"/>
        <van-tag type="primary" v-show="value.price_vip">
          <money v-if="value.price_vip>0" :value="value.price">
            <template #front>会员：</template>
          </money>
          <span v-else>会员：免费</span>
        </van-tag>
      </div>
      <p class="del_price"><del v-show="value.price_del">{{value.price_del}}</del></p>
    </div>
    <div class="title">
      <h2 class="text-ellipsis">{{value.title}}</h2>
      <p class="tips" v-show="value.info">{{value.info}}</p>
    </div>
    <div class="stock-sales-quota flex" style="justify-content: space-around;">
      <p v-show="value.quota>0">限购：{{value.quota}}</p>
      <p v-show="value.sales">销量：{{value.sales}}</p>
      <p v-show="value.stock">库存：{{value.stock}}</p>
    </div>
  </div>
</template>

<script>

import {to_string} from "@/js/s94_tool.js";
import Money from "@/components/widget/Money.vue";

/**价格-标题-库存-销量
 * @prop {String|Number} price 价格
 * @prop {String|Number} [price_vip] 会员价，如果为空表示不显示
 * @prop {String|Number} [price_del] 划线价，如果为空表示不显示
 * @prop {String|Number} title 标题
 * @prop {String|Number} [info] 简介信息
 * @prop {String|Number} [quota] 限购，如果为空表示不显示
 * @prop {String|Number} [sales] 销量，如果为空表示不显示
 * @prop {String|Number} [stock] 库存，如果为空表示不显示
 */
export default {
  _title_: '价格-标题-库存-销量',
  _tip_: '一个商品详情用的显示标题价格数据的组件',
  _head_img_: '',
  _group_: '详情组件',
  components: {Money},
  props:{
    title: {
      type: [String, Number],
      default: '标题',
      _label_: '标题',
      _tip_: '',
      _required_: true,
      _default_: "get($info,'title')",
    },
    price: {
      type: [String, Number],
      default: 0,
      _label_: '价格',
      _tip_: '',
      _required_: true,
      _default_: "get($info,'price')",
    },
    price_vip: {
      type: [String, Number],
      _label_: '会员价',
      _tip_: '',
      _default_: "get($info,'price_vip')",
    },
    price_del: {
      type: [String, Number],
      _label_: '删除价',
      _tip_: '',
    },
    info: {
      type: [String, Number],
      _label_: '简介',
      _tip_: '',
      _default_: "get($info,'info')",
    },
    quota: {
      type: [String, Number],
      _label_: '限购',
      _tip_: '',
    },
    sales: {
      type: [String, Number],
      _label_: '销量',
      _tip_: '',
      _default_: "concat(get($info,'sales'),get($info,'sales_base'))",
    },
    stock: {
      type: [String, Number],
      _label_: '库存',
      _tip_: '',
      _default_: "get($info,'stock')",
    },
  },
  data(){
    return {}
  },
  methods:{},
  computed:{
    value(){
      return {
        price: to_string(this.price),
        price_vip: to_string(this.price_vip),
        price_del: to_string(this.price_del),
        title: to_string(this.title),
        info: to_string(this.info),
        quota: to_string(this.quota),
        sales: to_string(this.sales),
        stock: to_string(this.stock),
      }
    }
  },
  mounted(){
  }
}
</script>